<template>
<div>
    <header1></header1>
    <div class="loginBox">
        
        <el-row :gutter="20">
            <el-col :span="8" :offset="7">
                <el-button class="loginTitle">
                    <router-link :to="{name:'signin'}">signin</router-link>
                </el-button>
            </el-col>
            <el-col :span="8" >
                <el-button class="loginTitle">
                    <router-link to="/login/signup">signup</router-link>
                </el-button>
            </el-col>
        </el-row>
        <el-row>
            <router-view></router-view> 
        </el-row>
    </div>
</div>
    
</template>

<script>
import header from '../components/header.vue';
import signin from '../components/signin.vue'
import register from '../components/register.vue'

export default{
  data(){
      return{
          show:true,
      }
  },
  methods:{
      change(){
          this.show=!this.show;
      }

  },
  components:{
      signin:signin,
      register:register,
      header1:header,
  },
  created() {
        setTimeout(function () {
            window.L2Dwidget.init({
                model: {
                    // jsonPath: 'https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json',
                    jsonPath: 'https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json',
                }
            });
        },1000);
    },
}
</script>

<style>
    .loginBox{
        width: 250px;
        height: 260px;
        position: absolute;
        left:-10px; right:0; top:-80px; bottom:0;
        margin:auto;
    }

    .loginTitle{
        font-size: 18px;
        border: none;
    }

    .el-row {
        margin-bottom: 20px;
        border: none;
    }

    .signinBox{
        width: 350px;
        height: 140px;
        border: 1px solid green;
        position: absolute;
        left:0; right:0; top:0; bottom:0;
        margin:auto;
    }

    .box2{
        position: absolute;
        left: 40%;
        top: 40%;
        width: 350px;
        height: 140px;
        border: 1px solid green;
    }
    </style>